<template>
	<view class="zwyOpacity" style="width:100vw;height:100vh;position:relative;display:flex;align-items: center;justify-content: center;">
	  <image style="width:100rpx;height:100rpx;opacity:0.2;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/icon_play.png"></image>
	  <view style="position:absolute;bottom:calc(env(safe-area-inset-bottom) + 60px);left:40rpx;display:flex;align-items: center;justify-content: center;">
	      <view style="margin-right:20rpx;" class="itemCircle"></view>
	      <view class="itemBoxBottom"></view>
	  </view>
	  <view style="position:absolute;right:40rpx;bottom:calc(env(safe-area-inset-bottom) + 60px);">
	      <view style="display:flex;align-items: center;justify-content: center;flex-direction: column;margin-top:20rpx;" v-for="(item,index) in 4" :key="index">
	          <view class="itemCircle"></view>
	          <view class="itemBox"></view>
	      </view>
	  </view>
	</view>
</template>

<script>
	export default {
		name:"zwySkeleton",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
/* components/zwySkeleton/zwySkeleton.wxss */
@keyframes zwyOpacity {
  0% {
      opacity: 1;
  }

  100% {
      opacity: 0.6;
  }
}
.zwyOpacity{
  will-change: transform;
  animation: zwyOpacity 1s infinite linear alternate;
}
.itemBox{
  background-color: #27262b;
  width: 50rpx;
  height: 20rpx;
  margin-top: 10rpx;
}
.itemBoxBottom{
  background-color: #27262b;
  width: 500rpx;
  height: 50rpx;
}
.itemCircle{
  border-radius: 50%;
  background-color: #27262b;
  width: 50rpx;
  height: 50rpx;
}
.likeImg{
  width: 31rpx;
  height: 33rpx;
}
.commentLine{
  display: flex;
  margin-bottom: 41rpx;
  padding: 0 26rpx 0 36rpx;
  justify-content: space-between;
  align-items: flex-start;
}
.commentLineMid{
  flex: 1;
}
.commentLineRight{
  width: 78rpx;
  height: 78rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.commentLineLeft{
  margin-right: 20rpx;
}


.prizeBox{
  width: 95%;
  margin-bottom: 30rpx;
  margin-left: 2.5%;
  background: white;
  border-radius: 10rpx;
  overflow: hidden;
}
.prizeBottom{
  padding: 26rpx 23rpx 33rpx 27rpx;
}
.prizeTitle{
  font-size: 32rpx;
  color: #333333;
  font-weight: bolder;
}
.prizeDesc{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 11rpx;
}
.prizeTime{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #999999;
  font-size: 28rpx;
}
</style>
